<template>
  <div style="height: 100%">
  </div>
</template>

<script>
  import EchartsMixins from '../echarts.mixins'
  import Format from '@/utils/format'

  export default {
    mixins: [EchartsMixins],
    data() {
      return {
        yAxisList: [],
        charts: '',
        xAngleList: [],
        compensateXAngleList: [],
        // 监测点名称
        monitorName: '',
        seriesLists: [],
      }
    },
    computed: {
      options() {
        const that = this
        const Echarts = require('echarts')
        return {
          title: {
            text: this.monitorName + '倾角变化速率曲线图',
            x: 'center',
            align: 'center',
          },
          grid: {
            left: '7%',
            right: '8%',
            bottom: '70px'
          },
          legend: {
            data: ['X角度', 'Y角度', 'XY角度' ],
            y: 'top',
            x: 'center',
            padding: [30, 0 , 0, 0],
            // 设置为可滚动的图例
            type: 'scroll',
            selected:{
              "方位角":false, //默认不展示项
              "未补偿倾角":false, //默认不展示项
            }
          },
          toolbox: {
            right: '5',
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',

              label: {
                backgroundColor: '#505765'
              }
            },
            formatter: (params, ticket, callback) => {
              var contentArr = []
              contentArr.push(Format(new Date(params[0].value[0])))
              for (var i = 0; i < params.length; i++) {
                var data = params[i]
                if (data.seriesName == '温度') {
                  contentArr.push(data.marker + data.seriesName + '值：' + data.value[1] + '°C')
                } else {
                  contentArr.push(data.marker + data.seriesName + '值：' + data.value[1] + '°/h')
                }
              }
              let remark = params[0]?.data?.remark || ''
              remark && contentArr.push(`<p style='font-size:10px;' >${this.sliceStr(remark)}</p>`)
              return contentArr.join('<br/>')
            },
          },
          dataZoom: [
            {
              show: true,
              realtime: true,
              handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
              handleSize: '80%',
              handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
              }
            },
            {
              // Y轴的滚动条
              type: 'slider',
              show: true,
              yAxisIndex: [0],
              top:'10%',
              left: '0%', // 根据实际情况调整位置
              start: 0,
              end: 100 // 根据实际情况调整显示范围
            },
            {
              // X轴的滚动条
              type: 'slider',
              show: true,
              xAxisIndex: [0],
              bottom: '0%', // 根据实际情况调整位置
              start: 0,
              end: 100 // 根据实际情况调整显示范围
            },
            {
              // 内置的Y轴缩放，可以用鼠标滚轮操作
              type: 'inside',
              yAxisIndex: [0],
            },
            {
              // 内置的X轴缩放，可以用鼠标滚轮操作
              type: 'inside',
              xAxisIndex: [0],
            }
          ],
          xAxis: {
            splitLine: {
              show: false
            },
            type: 'time',
            symbol: 'none',
            boundaryGap: false,
            axisLabel: { // 坐标轴标签样式设置
              showMaxLabel: true,
              formatter: function (value, index) { // 坐标轴文字展示样式处理
                return Echarts.format.formatTime('yyyy-MM-dd', new Date(value))
              },
            }
          },
          yAxis: {
            max: function (value) {
              if (value.max < 0.3) {
                return 0.3;
              }
              return Math.ceil(value.max);//向上取整
            },
            name: '角度值(°/h)',
            type: 'value'
          },
          series: this.seriesLists
        }
      }
    },
    methods: {
      updateEchart(data, monitorName, isJiuGan, monitorInfo) {
        this.charts.clear();
        this.monitorName = monitorName;
        this.firstDataTime = monitorInfo.firstDataTime;
        this.collectionTime = monitorInfo.collectionTime;

        // 更新角度变化速率数据
        this.xAngleSpeed = data.xAngleSpeed;
        this.xyAngleSpeed = data.xyAngleSpeed;
        this.yAngleSpeed = data.yAngleSpeed;

        // 计算所有速率数据的最大和最小值
        let allSpeedValues = [...this.xAngleSpeed, ...this.yAngleSpeed, ...this.xyAngleSpeed].flatMap(item => item[1]);
        let maxSpeedValue = Math.max(...allSpeedValues);
        let minSpeedValue = Math.min(...allSpeedValues);

        // 动态设置Y轴的最大值和最小值
        this.options.yAxis.max = maxSpeedValue < 0.3 ? 0.3 : Math.ceil(maxSpeedValue);
        this.options.yAxis.min = minSpeedValue > -0.3 ? -0.3 : Math.floor(minSpeedValue);

        // 更新series数据
        this.seriesLists = [
          {
            name: 'X角度',
            type: 'line',
            smooth: false,
            symbol: 'none',
            data: this.xAngleSpeed,
          },
          {
            name: 'Y角度',
            type: 'line',
            smooth: false,
            symbol: 'none',
            data: this.yAngleSpeed,
          },
          {
            name: 'XY角度',
            type: 'line',
            smooth: false,
            symbol: 'none',
            data: this.xyAngleSpeed,
          },
        ];

        this.initEcharts();
        this.charts.setOption(this.options);
        this.charts.resize();
      },
    },

  }
</script>
